<template>
  <a-modal width="800px" centered title="结果" v-model:open="visible">
    <div class="flex">
      <div class="flex-1">
        <a-card class="mb-4">
          <div class="grid grid-cols-2 grid-rows-2">
            <a-statistic
              title="成功"
              :value="suc"
              animation
              :value-style="{ color: '#0fbf60' }"
            ></a-statistic>
            <a-statistic
              title="失败"
              :value="unknown"
              show-group-separator
              :value-style="{ color: 'red' }"
            ></a-statistic>
            <a-statistic title="总数" :value="sum" show-group-separator></a-statistic>
            <a-statistic
              title="无权限"
              :value="unAuths"
              show-group-separator
              :value-style="{ color: 'orange' }"
            ></a-statistic>
          </div>
        </a-card>
        <a-table :data="tips" :columns="errorColumns"></a-table>
      </div>
      <div class="flex-1">
        <a-result status="success" title="上传成功">
          <template #subTitle>
            <div class="flex gap-4 justify-center">
              <div>{{ t('成功') }}:{{ suc }}</div>
              <div>{{ t('失败') }}:{{ unknown }}</div>
              <div>{{ t('总数') }}:{{ sum }}</div>
            </div>
          </template>
        </a-result>
      </div>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
interface TableItem {
  name: string;
  msg: string;
  index: string;
}
interface Params {
  suc: number;
  unknown: number;
  sum: number;
  unAuths?: number;
  tips: TableItem[];
}
defineProps<Params>();
const visible = defineModel<boolean>('visible');
const { t } = useI18n();
const errorColumns = [
  { title: '门店名称', dataIndex: 'name' },
  { title: '错误原因', dataIndex: 'msg' },
  { title: '行号', dataIndex: 'index' },
];
</script>

<style lang="scss" scoped></style>
